<template>
  <div>
    <basic-container>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :table-loading="tableLoading"
        :page="page"
        ref="crud"
        @refresh-change="handleRefreshChange"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @selection-change="handleSelectionChange"
        @search-change="handleSearchChange"
      >
        <template slot="menuLeft">
          <el-button
            type="primary"
            @click="handleExport"
            :loading="downloadLoading"
            icon="el-icon-download"
            v-perm="'/admin/trade_log/export'"
            size="small"
            >导出</el-button
          >
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>
  <script>
import { validatenull } from "@/util/validate";
import { filterForm } from "@/util/util";
// import { DIC } from "@/const/dic";
import { getLabelFromDicV2 } from "@/const/dic";
import { nowDate } from "../../util/date";
import * as apiObj from "../../api/tradeLog";
import { tradeLogTableOption } from "@/const/tradeLog/tradeLogTableOption.js";

export default {
  data() {
    return {
      bachDeleting: false,
      tableOption: {}, //表格设置属性
      tableData: [], //表格的数据
      downloadLoading: false,
      tableLoading: false,
      tableQueryParam: {},
      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
      },
    };
  },
  created() {
    //初始化数据格式
    this.tableOption = tradeLogTableOption;
    this.handleList();
  },
  methods: {
    handleCurrentChange(page) {
      this.page.currentPage = page;
      this.handleList();
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.handleList();
    },

    handleSelectionChange(args) {
      this.currentSelectedRowIds = args.map((el) => el.id);
    },
    hasChanged(params1, params2) {
      return Object.keys(params1).some((key) => params2[key] != params1[key]);
    },
    handleSearchChange(params) {
      if (this.hasChanged(params, this.tableQueryParam)) {
        this.page.currentPage = 1;
      }
      this.tableQueryParam = params;
      this.handleList();
    },

    handleRefreshChange() {
      this.handleList();
    },
    /**
     * @title 获取数据
     * @detail 赋值为tableData表格即可
     *
     **/
    handleList() {
      this.tableLoading = true;
      apiObj
        .list({
          pageNo: this.page.currentPage,
          pageSize: this.page.pageSize,
          ...this.tableQueryParam,
        })
        .then((data) => {
          this.tableData = data.data || data.dataList || [];
          this.page.total = data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    handleExport() {
      this.downloadLoading = true;
      apiObj
        .list({
          pageNo: 1,
          pageSize: 3000,
          ...filterForm(this.$refs.crud.searchForm),
        })
        .then((res) => {
          import("@/vendor/Export2Excel").then((excel) => {
            const columns = tradeLogTableOption.column.filter(
              (el) => el.hide !== true && el.type != "upload"
            );
            const tHeader = columns.map((el) => el.label);
            const filterVal = columns.map((el) => el.prop);
            const data = this.formatJson(filterVal, res.data || res.dataList);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: "用户交易记录表" + nowDate(),
            });
            this.downloadLoading = false;
          });
        });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return getLabelFromDicV2(this.$refs.crud.DIC, j, v[j]);
        })
      );
    },
  },
};
</script>
